<template>
    <transition name="vue-flow-editor-preview-transition">
        <div class="vue-flow-editor-preview" v-if="p_value">
            <div class="vue-flow-editor-preview-body" ref="body">
                <div class="vue-flow-editor-preview-target" ref="target"></div>
                <div class="vue-flow-editor-preview-close" @click="close">
                    <i class="el-icon-close"/>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>

    import {G6} from "@/g6/g6";
    import {GraphStyle} from "../utils/styles";

    export default {
        name: "vue-flow-editor-preview",
        props: {
            value: {type: Boolean},
            data: {type: Object},
        },
        watch: {
            value(val) {
                this.p_value = val
                if (!!val) {
                    this.$nextTick(() => {
                        this.refresh()
                    })
                }
            },
        },
        data() {
            return {
                graph: null,
                p_value: this.value,
            }
        },
        methods: {
            refresh() {
                const container = this.$refs.target
                const {offsetHeight, offsetWidth} = this.$refs.body

                if (!!this.graph) {
                    this.graph.destroy()
                }
                this.graph = new G6.Graph({
                    container,
                    width: offsetWidth,
                    height: offsetHeight,

                    ...GraphStyle.default,
                    mode: {
                        default: [
                            'drag-canvas',
                            'zoom-canvas',
                        ]
                    },
                })

                this.graph.read(this.data)
                this.graph.fitView(20)
            },
            close() {
                this.p_value = false
                this.$emit('input', this.p_value)
            },
        },
    }
</script>

<style lang="scss">
</style>